<template>
  <div class="base-info-view">
    <el-form
      class="form-detail"
      label-position="right"
      label-width="140px"
      style="padding-left:20px;"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item
          label="政策编号："
          style="width: 50%"
        >
          <div>{{ detailData?.marketingPolicyNo }}</div>
        </el-form-item>
        <el-form-item
          label="通用名："
          style="width: 50%"
        >
          <div>{{ detailData?.productPopularName }}</div>
        </el-form-item>
        <el-form-item
          label="商品名："
          style="width: 50%"
        >
          <div>{{ detailData?.productName||'无' }}</div>
        </el-form-item>
        <el-form-item
          label="包装规格："
          style="width: 50%"
        >
          <div>{{ detailData?.packSpecs }}</div>
        </el-form-item>
        <el-form-item
          label="生产厂家："
          style="width: 50%"
        >
          <div>{{ detailData?.producer || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="所属产品线："
          style="width: 50%"
        >
          <div>{{ detailData?.productLineName }}</div>
        </el-form-item>
        <el-form-item
          label="适用地区："
          style="width: 50%"
        >
          <area-list-view :areas="detailData?.region" />
        </el-form-item>
        <el-form-item
          label="政策文件："
          style="width: 50%"
        >
          <upload-file-view
            :file-arr="detailData?.files"
            :is-upload="false"
          />
        </el-form-item>
        <el-form-item
          label="创建人："
          style="width: 50%"
        >
          <span>{{ detailData?.creatorName }}</span>
        </el-form-item>
        <el-form-item
          label="创建时间："
          style="width: 50%"
        >
          <span>{{ dateFormat( 'yyyy-mm-dd HH:MM', detailData?.createdAt) }}</span>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {reactive, toRefs, watch} from 'vue'

export default {
  name: 'BaseInfo',
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var detail = reactive({
      detailData: props.detailData,
    })
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          detail.detailData = newval
        }
      },
      { immediate: true }
    )
    return {
      ...toRefs(detail),
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
